<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 600px;
      height: 600px;
      background-color: pink;
      color: #ffffff;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    /*
    防抖：单位时间内，频繁的触发事件，只执行最后一次 
    语法：
         _.debounce(func, [wait=0], [options=])
         创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 
         debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 
         可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。
          func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。
          注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。
          如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。
    */

    let i = 1
    let div = document.querySelector("div")
    function mouseMove() {
      div.innerHTML = i++
    }

    /* 防抖函数 */
    function debounce(fn, time) {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        } else {
          timer = setTimeout(() => {
            fn()
          }, time)
        }

      }
    }

    div.addEventListener("mousemove", debounce(mouseMove, 1000))
  </script>
</body>

</html>